<html>
    <head>
        <title>Reading List</title>
        <link rel="stylesheet" th:href="@{/style.css}"/>
    </head>
    <body>
        <h2>Your Reading List</h2>
        <div th:unless="${#lists.isEmpty(books)}">
            <dl th:each="book :  ${books}">
                <dt class="bookHeadline">
                    <a th:href="'http://www.amazon.com/gp/product/'
                      + ${book.isbn} + '/tag=' + ${amazonID}"
                       th:text="${book.title}">Title</a> by
                    <span th:text="${book.author}">Author</span>
                    (ISBN: <span th:text="${book.isbn}">ISBN</span>)
                </dt>
                <dd class="bookDescription">
                    <span th:if="${book.description}" th:text="${book.description}">Description</span>
                    <span th:if="${book.description eq null}">No description available</span>
                </dd>
            </dl>
        </div>
        <div th:if="${#lists.isEmpty(books)}">
            <p>You have no books in your book list</p>
        </div>

        <hr/>

        <h3>Add a book</h3>
        <form method="POST" th:action="@{/}">
            <label for="title">Title:</label>
            <input id="title" name="title" size="50"/><br/>
            <label for="author">Author:</label>
            <input id="author" name="author" size="50"/><br/>
            <label for="isbn">ISBN:</label>
            <input id="isbn" name="isbn" size="15"/><br/>
            <label for="description">Description:</label>
            <textarea id="description" name="description" cols="80" rows="5"/><br/>
            <input type="submit"/>
        </form>
    </body>
</html>